<template>
  <view class="login">
    <image
      src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/9a9198e81b1e4e6195d95b0374aa95d7.png"
      class="top-bg"
    ></image>
    <image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/why_logo1.png" class="logo"></image>
    <view class="nr">
      <view class="list">
        <image src="../../static/images/phone.png" mode=""></image>
        <input
          type="text"
          v-model="loginTel"
          placeholder="请输入用户名"
          placeholder-style="font-size:30rpx;color: #4C6288;"
          maxlength="11"
          @input="onTelChange"
        />
      </view>
      <view class="list pwd">
        <image src="../../static/images/password.png" mode=""></image>
        <input
          type="password"
          v-model="loginPwd"
          placeholder="请输入密码"
          placeholder-style="font-size:30rpx;color: #4C6288;"
          maxlength="15"
          @input="onPwdChange"
        />
      </view>
      <view class="sub" @click="telLogin()">登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginTel: '',
      loginPwd: '',
      time: 0,
    };
  },
  mounted() {},
  methods: {
    onTelChange(e) {
      this.loginTel = e.target.value;
    },
    onPwdChange(e) {
      this.loginPwd = e.target.value;
    },

    telLogin() {
      const that = this;
      uni.showLoading({
        title: '正在登陆...',
      });
      wx.login({
        success: res => {
          const code = res.code;
          that.$clApi.haoleiAgentApi
            .fetchLogin({
              data: {
                loginName: this.loginTel,
                password: this.loginPwd,
                code: code,
              },
            })
            .then(res => {
              uni.hideLoading();
              if (res.code === 200) {
                console.log(1000, '登陆成功');
                that.$store.dispatch('baseInfo/setBaseInfo', {
                  token: res.data.token,
                  perms: res.data.perms,
                  roles: res.data.roles,
                  userInfo: {
                    loginFlag: res.data.loginFlag,
                    mobile: res.data.mobile,
                  },
                });
                uni.navigateBack();
              } else {
                that.$utils.toast(res.msg);
              }
            });
        },
        fail: e => {
          uni.hideLoading();
          console.log(e);
          that.$utils.toast('微信授权失败，请检查网络后重试');
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100vh;
  background: linear-gradient(135deg, #7692bb 0%, #425985 100%);

  .top-bg {
    width: 100%;
    /* height: 499rpx; */
    /* background-size: cover; */
    background-repeat: no-repeat;
  }
  .bg {
    width: 750rpx;
    height: 499rpx;
  }
  .logo {
    position: absolute;
    top: 210rpx;
    left: 54%;
    width: 330rpx;
    height: 124rpx;
    margin-left: -214rpx;
  }
  .nr {
    position: absolute;
    top: 432rpx;
    left: 25rpx;
    right: 25rpx;
    bottom: 25rpx;
    z-index: 9;
    /* background: linear-gradient(135deg, #7692bb 0%, #425985 100%); */
    background-color: #425985;
    border-radius: 20rpx;
    padding: 100rpx 30rpx 0;
    margin: -68rpx auto 0;
    .list {
      position: relative;
      margin-bottom: 20rpx;
      border-radius: 4rpx;
      overflow: hidden;
      image {
        position: absolute;
        top: 10rpx;
        left: 20rpx;
        width: 60rpx;
        height: 60rpx;
      }

      input {
        padding-left: 100rpx;
        height: 80rpx;
        background: #fff;
        font-size: 24rpx;
      }
    }
    .pwd {
      margin-top: 68rpx;
    }
    .sub {
      height: 97rpx;
      line-height: 97rpx;
      border-radius: 97rpx;
      color: #fff;
      background: #2d3c63;
      text-align: center;
      margin-top: 120rpx;
    }
    .bottom {
      position: absolute;
      bottom: 40rpx;
      left: 30rpx;
      right: 30rpx;
      font-size: 24rpx;
      height: 30rpx;
      color: #ffffff;
      .left {
        float: left;
      }
      .right {
        float: right;
      }
    }
  }
  .number {
    input {
      // background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
      background-color: #fff;
      border-radius: 3rpx;
      padding: 0 30rpx;
      height: 80rpx;
      font-size: 28rpx;
    }
    .code {
      overflow: hidden;
      padding: 40rpx 0;
      input {
        width: 335rpx;
        float: left;
      }
      image {
        float: right;
        width: 159rpx;
        height: 80rpx;
        background: #ffffff;
      }
    }
    .number {
      padding: 11rpx 0 40rpx;
    }
    .number_code {
      padding: 10rpx 0 40rpx;
      position: relative;
      .code_text {
        position: absolute;
        z-index: 9;
        right: 12rpx;
        top: 15rpx;
        padding: 0 20rpx;
        height: 70rpx;
        background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
        border-radius: 3rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #fff;
        line-height: 70rpx;
      }
    }
  }
}
</style>
